<!DOCTYPE html>
<html>
    <head th:include="guest/template :: header" >
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body class='main-body'>
        <div class="container main-container">

            <!--<div th:include="master-layout/template::top" style="z-index: 901;"/>-->

            <div class="banner" th:include="guest/template :: banner"/>
            <div th:include="guest/template ::nav" /> 
            <p></p>
            <div  th:if="${content}">
                <div id="contents" class="masthead col-md-8 content-margin "/>
                <div class="col-md-4">
                    <div class="panel-same-info main-container">
                        <div class="panel-heading align_center">
                            <strong>TIN TƯC NỔI BẬT</strong>
                        </div>              
                    </div>  
                    <div class="most-read-panel main-container content-margin ">
                        <div class="panel-heading align_center">  
                            <strong>ĐƯỢC XEM NHIỀU NHẤT</strong>
                        </div>
                        <ul class="nav nav-pills nav-stacked">
                            <li th:each="hotnews : ${listhotnews}" style="height:100px;">
                                <a class="row-fluid" style="padding-left: 0px; height: 100%;" th:href="@{'/guest/news/'}+${hotnews.news.id}">
                                    <div th:if="${hotnews.news.imageUrl}" style="height: 100%;" class="pull-left col-md-4">
                                        <img th:src="${hotnews.news.imageUrl}" class="img-thumbnail" style="height:100%"/>
                                    </div>
                                    <div class="col-md-8 pull-right" th:text="${hotnews.news.title}"/>
                                </a>
                            </li>
                        </ul>
                    </div>  

                    <div class="warning-panel main-container content-margin ">
                        <div class="panel-heading align_center">  
                            <strong>THÔNG BÁO</strong>
                            <div class="media" th:if="${user}">
                                <a class="thumbnail pull-left" href="#">
                                    <img class="media-object" src=""/>
                                </a>
                                <div class="media-body">
                                    <strong class="media-heading" th:inline="text">Xin chào, <a>[[${user.username}]]</a> </strong>
                                    <p> 
                                        <span class="label label-warning">0 cảnh báo</span>
                                        <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-comment"></span> 1 tin nhắn mới</a>
                                    </p>
                                    <p>
                                        <a href="logout" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-log-out"></span> Thoát</a>
                                    </p>
                                </div>                            
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li>
                                    <a>adfasdfasdfadfsdfadsfsdf</a>
                                </li>
                                <li>
                                    <a>adfasdfasdfadfsdfadsfsdf</a>
                                </li>
                            </ul>
                        </div>  
                    </div>
                    <div class="divider"/>
                    <div class="divider"/>
                    <div class="divider"/>
                    <hr/>
                    <!-- Message-->
                    <div class="panel" th:if="${user}">           
                        <form accept-charset="UTF-8" action="" method="POST">
                            <textarea class="form-control counted" name="message" placeholder="Nội dung..." rows="5" style="margin-bottom:10px; resize: none;"></textarea>
                            <h6 class="pull-right" id="counter">Tối đa 300 kí tự</h6>
                            <button class="btn btn-info" type="submit">Kiến nghị</button>
                        </form>

                    </div>                    
                    <div class="panel panel-primary" th:if="${user}">
                        <div class="panel-heading">            Online Friends
                            <div class="pull-right action-buttons">
                                <div class="btn-group pull-right">
                                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-cog" style="margin-right: 0px;"></span>
                                    </button>
                                    <ul class="dropdown-menu slidedown">
                                        <li><a >Chat Sounds</a></li>
                                        <li><a >Close All Chat Tabs</a></li>                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group online-user">
                                <li class="list-group-item">

                                    <label>
                                        Vũ Văn Lý
                                    </label>                                    
                                    <div class="pull-right action-buttons">                                        
                                        <a href="http://www.jquery2dotnet.com" class="flag"><span class="glyphicon glyphicon-flag"></span>Học Sinh</a>
                                    </div>
                                </li>
                                <li class="list-group-item">

                                    <label>
                                        Trần Lê Tuấn
                                    </label>                                    
                                    <div class="pull-right action-buttons">
                                        <a href="http://www.jquery2dotnet.com" class="flag"><span class="glyphicon glyphicon-flag"></span>Giáo Viên</a>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <label for="checkbox3">
                                        Lê Võ Hữu Trí
                                    </label>                                    
                                    <div class="pull-right action-buttons">
                                        <a href="http://www.jquery2dotnet.com" class="flag"><span class="glyphicon glyphicon-flag"></span>Nhân Viên</a>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <div class="panel-footer">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>
                                        There are <span class="label label-info">3</span>people online.</h6>
                                </div>                                
                            </div>
                        </div>
                    </div>       

                    <!--end message-->
                </div>

                <script th:inline="javascript">
                    jQuery(document).ready(function() {
                    jQuery('#contents').html([[${content}]]);
                            $('#carousel-inner').children()[0].setAttribute('class', 'item active');
                            loadCarousel();
                    });</script>
            </div>
            <div th:unless="${content}">
                <nav class="margin-top navbar" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span><span class="icon-bar" style=""></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                        <ul id ="catalogs" class=" pull-right nav navbar-nav">
                            <li id="0" class="catalog_item dropdown active" ><a class="dropdown-toggle" href="#faq-cat-1" data-toggle="tab">Tất cả</a></li>
                            <li class="catalog_item dropdown" th:id ="${catalog.id}" th:each="catalog : ${listCatalogs}"><a class="dropdown-toggle" href="#faq-cat-1" data-toggle="tab" th:text="${catalog.name}" th:if="${catalog.name}"></a></li>
                        </ul>
                    </div>
                </nav>
                <div class="container" >
                    <div class="container">
                        <div class="col-md-3 list-group pull-left">
                            <!--search form-->
                            <!--end search form-->
                            <hr/>
                            <div th:unless="${user}" id="login-frame">
                            </div>
                            <div class="media" th:if="${user}">
                                <a class="thumbnail pull-left" href="#">
                                    <img class="media-object" src=""/>
                                </a>
                                <div class="media-body">
                                    <strong class="media-heading" th:inline="text">Xin chào, <a>[[${user.username}]]</a> </strong>
                                    <p> 
                                        <span class="label label-warning">0 cảnh báo</span>
                                        <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-comment"></span> 1 tin nhắn mới</a>
                                    </p>
                                    <p>
                                        <a href="logout" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-log-out"></span> Thoát</a>
                                    </p>
                                </div>

                            </div>
                            <div class="divider"/>
                            <div class="divider"/>
                            <div class="divider"/>
                            <hr/>
                            <!-- Message-->
                            <div class="panel" th:if="${user}">           
                                <form accept-charset="UTF-8" th:action="@{/guest/comment/save}" method="POST">
                                    <textarea class="validate[required] form-control counted" name="message" placeholder="Nội dung..." rows="5" style="margin-bottom:10px; resize: none;"></textarea>
                                    <h6 class="pull-right" id="counter">Tối đa 300 kí tự</h6>
                                    <button class="btn btn-info" type="submit">Kiến nghị</button>
                                </form>
                            </div>
                            <hr/>
                            <div class="panel panel-primary panel-online-user" th:if="${user}">
                                <div class="panel-heading">            Online Friends
                                    <div class="pull-right action-buttons">
                                        <div class="btn-group pull-right">
                                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                                <span class="glyphicon glyphicon-cog" style="margin-right: 0px;"></span>
                                            </button>
                                            <ul class="dropdown-menu slidedown">
                                                <li><a >Chat Sounds</a></li>
                                                <li class="closeAllThatTabs"><a>Close All Chat Tabs</a></li>                                        
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <ul class="list-group online-user" id="list_online">
                                        <!--list_online-->

                                    </ul>
                                </div>

                            </div>     

                            <!--end message-->
                        </div>
                        <!--News-->
                        <div class="col-md-9 pull-right">
                            <div id="content-panel" class="news-container ">                      
                                <div id="list_news">

                                </div>
                                <div class="">
                                    <ul id="page_num" class="pagination">
                                        <li ><a id="pre_page">&laquo;</a></li>
                                        <li ><a id="next_page">&raquo;</a></li>
                                    </ul>
                                    <input type="hidden" id="currPage" value="1"/>
                                </div>
                            </div>
                        </div>
                        <!--end news-->
                    </div>
                    <!--thumnnail news-->

                    <!--end thumbnail news-->


                </div>

                <div th:include="guest/template :: footer"></div>
                <div id="chat_tab">
                </div>
                <script th:inline="javascript">
                            /*<![CDATA[*/
                            var homeUrl = /*[[@{/guest/news}]]*/ "homeUrl";
                            var viewUrl = /*[[@{/guest/login}]]*/ "viewUrl";
                            var newsUrl = /*[[@{/guest/home_list_news}]]*/ "newsUrl";
                            jQuery(document).ready(function() {
                    loadNews(null);
                            loadFrame();
                            jQuery("#form-horizontal").validationEngine();
                            COMMON.activeMenu("home_nav");
                            $('#carousel-inner').children()[0].setAttribute('class', 'item active');
                            $('#catalogs').children()[0].setAttribute('class', 'catalog_item dropdown active');
                            loadCarousel();
                    });
                            /*]]>*/
                </script>   
            </div>
        </div>	











        <link href="" th:href="@{/media/css/guest/guest.css}" rel="stylesheet" media="screen" />
        <script th:src="@{/media/js/guest/home.js}" type="text/javascript"/>
        <script th:src="@{/media/js/guest/checkonline.js}" type="text/javascript"/>
        <script th:src="@{/media/js/guest/chat.js}" type="text/javascript"/>
        <script th:inline="javascript">
                    var userId = /*[[${user.getId()}]]*/"userId";
                    var userName = /*[[${user.getUsername()}]]*/"Me";
        </script>

        <script th:inline="javascript">
                    /*<![CDATA[*/
                    var viewUrl = /*[[@{/guest/login}]]*/ "viewUrl";
                    var newsUrl = /*[[@{/guest/home_list_news}]]*/ "newsUrl";
                    jQuery(document).ready(function() {
            jQuery("#form-horizontal").validationEngine();
                    COMMON.activeMenu("home_nav");
                    loadCarousel();
                    $('#media').carousel({
            pause: true,
                    interval: 4000
            });
                    loadFrame();
                    loadNews(null);
            });
                    $(".catalog_item").on('click', function() {
            loadNews(this);
            });
                    var tab_width = 250;
                    var chat_tab;
                    var last_tab;
                    var right;
                    var next_tab;
                    var self;
                    var demo;
                    //handle event for online users panel
                    $(".closeAllThatTabs").on('click', function(){
            //remove all chat boxs
            $("#chat_tab").empty();
            })
                    $("ul.online-user").on('click', 'li', function() {

            chat_tab = $("#chat_tab")[0];
                    self = $(this);
                    right = "-250px";
                    var length = chat_tab.children.length;
                    if (length > 0){
            last_tab = chat_tab.children[length - 1];
                    right = last_tab.style.right;
            }

            var chatboxtitle = self[0].children[0].children[0].innerHTML;
                    var chatboxid = self[0].id;
                    var chatboxcurrent = $("#chatbox_" + chatboxid);
                    //Neu chua co chatbox nay va so luong chatbox <=4 thi thi tao moi                    
                    if (chatboxcurrent.length == 0){

            // Neu co 4 chatbox roi thi k tao moi nua
            if (chat_tab.children.length < 5) {

            d = document.createElement('div');
                    $(d).attr("id", "chatbox_" + chatboxid)
                    .addClass("chatbox")
                    .html('<div class="chatboxhead"><div class="chatboxtitle">' + chatboxtitle + '</div><div class="chatboxoptions"><a href="javascript:void(0)" onclick="javascript:toggleChatBoxGrowth(\'' + chatboxid + '\')"><span class="span_chatbox">-</span></a> <a href="javascript:void(0)" onclick="javascript:closeChatBox(\'' + chatboxid + '\')"><span class="span_chatbox">X</span></a></div><br clear="all"/></div><div class="chatboxcontent"></div><div class="chatboxinput"><textarea class="chatboxtextarea" onkeydown="javascript:return checkChatBoxInputKey(event,this,\'' + chatboxtitle + '\',\'' + chatboxid + '\');"></textarea></div>')
                    .appendTo($("#chat_tab"));
                    var next_right = parseInt(right) + 255 + "px";
                    $("#chatbox_" + chatboxid).css('bottom', '0px');
                    $("#chatbox_" + chatboxid).css('display', 'block');
                    $("#chatbox_" + chatboxid).css('right', next_right);
                    $("#chatbox_" + chatboxid + " textarea").focus();
            }
            } else{
            //Neu co roi thi focus vao o input
            var content = chatboxcurrent[0].children[1];
                    var chatboxinput = chatboxcurrent[0].children[2];
                    if ($(content).hasClass("invisible")) {
            $(content).removeClass("invisible");
                    $(chatboxinput).removeClass("invisible");
            }
            $("#chatbox_" + chatboxid + " textarea").focus();
            }

            })




                    var toggle_click;
                    function toggleChatBoxGrowth(chatboxid) {
                    toggle_click = $("#chatbox_" + chatboxid)[0];
                            var content = toggle_click.children[1];
                            var chatboxinput = toggle_click.children[2];
                            if ($(content).hasClass("invisible")) {
                    $(content).removeClass("invisible");
                            $(chatboxinput).removeClass("invisible");
                    } else{
                    $(content).addClass("invisible");
                            $(chatboxinput).addClass("invisible");
                    }




                    }
            var close_click;
                    function closeChatBox(chatboxid){
                    close_click = $("#chatbox_" + chatboxid)[0];
                            var chat_tab = $("#chat_tab")[0];
                            chat_tab.removeChild(close_click);
                            //update lai right cho cac tab khac
                            var childrens = chat_tab.children;
                            var this_right = parseInt(close_click.style.right);
                            for (i = 0; i < childrens.length; i++) {
                    var child_right = parseInt(childrens[i].style.right);
                            //neu nam ben trai thi dich chuyen lai
                            if (child_right > this_right) {
                    child_right -= 255;
                    }
                    //update lai right
                    childrens[i].style.right = child_right + "px";
                    }
                    }
            var windowFocus = true;
                    var username;
                    var chatHeartbeatCount = 0;
                    var minChatHeartbeat = 1000;
                    var maxChatHeartbeat = 33000;
                    var chatHeartbeatTime = minChatHeartbeat;
                    var originalTitle;
                    var blinkOrder = 0;
                    var chatboxFocus = new Array();
                    var newMessages = new Array();
                    var newMessagesWin = new Array();
                    var chatBoxes = new Array();
                    function checkChatBoxInputKey(event, chatboxtextarea, chatboxtitle, chatboxid) {
                    if (event.keyCode == 13 && event.shiftKey == 0)  {
                    message = $(chatboxtextarea).val();
                            message = message.replace(/^\s+|\s+$/g, "");
                            $(chatboxtextarea).val('');
                            $(chatboxtextarea).focus();
                            $(chatboxtextarea).css('height', '44px');
                            if (message != '') {

                            $("#chatbox_" + chatboxid + " .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">' + userName + ':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">' + message + '</span></div>');
                            $("#chatbox_" + chatboxid + " .chatboxcontent").scrollTop($("#chatbox_" + chatboxid + " .chatboxcontent")[0].scrollHeight);
                            sendMessage(userId, chatboxid, message);
                
                    }
                    chatHeartbeatTime = minChatHeartbeat;
                            chatHeartbeatCount = 1;
                            return false;
                    }

                    var adjustedHeight = chatboxtextarea.clientHeight;
                            var maxHeight = 94;
                            if (maxHeight > adjustedHeight) {
                    adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight);
                            if (maxHeight)
                            adjustedHeight = Math.min(maxHeight, adjustedHeight);
                            if (adjustedHeight > chatboxtextarea.clientHeight)
                            $(chatboxtextarea).css('height', adjustedHeight + 8 + 'px');
                    } else {
                    $(chatboxtextarea).css('overflow', 'auto');
                    }

                    }

            /*]]>*/
        </script>  
    </body>
</html>